<!DOCTYPE html><html lang="en" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>ES6-ES11学习笔记 | 小康-技术博客</title><meta name="author" content="小康"><meta name="copyright" content="小康"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="TypeScript学习笔记">
<meta property="og:type" content="article">
<meta property="og:title" content="ES6-ES11学习笔记">
<meta property="og:url" content="https://codeslive.top/2023/05/26/ES6-ES11%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/index.html">
<meta property="og:site_name" content="小康-技术博客">
<meta property="og:description" content="TypeScript学习笔记">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306101141945.webp">
<meta property="article:published_time" content="2023-05-26T10:51:07.563Z">
<meta property="article:modified_time" content="2023-06-10T03:41:29.300Z">
<meta property="article:author" content="小康">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306101141945.webp"><link rel="shortcut icon" href="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306101307395.webp?x-oss-process=style/webp"><link rel="canonical" href="https://codeslive.top/2023/05/26/ES6-ES11%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: 'Copy successfully',
    error: 'Copy error',
    noSupport: 'The browser does not support'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: 'Just',
    min: 'minutes ago',
    hour: 'hours ago',
    day: 'days ago',
    month: 'months ago'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'ES6-ES11学习笔记',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-06-10 11:41:29'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="小康-技术博客" type="application/atom+xml">
</head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306101307395.webp?x-oss-process=style/webp" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">16</div></a><a href="/tags/"><div class="headline">Tags</div><div class="length-num">0</div></a><a href="/categories/"><div class="headline">Categories</div><div class="length-num">5</div></a></div><hr/></div></div><div class="post" id="body-wrap"><header class="not-top-img fixed" id="page-header"><nav id="nav"><span id="blog-info"><a href="/" title="小康-技术博客"><span class="site-name">小康-技术博客</span></a></span><div id="menus"><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav></header><main class="layout" id="content-inner"><div id="post"><div id="post-info"><h1 class="post-title">ES6-ES11学习笔记</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">Created</span><time class="post-meta-date-created" datetime="2023-05-26T10:51:07.563Z" title="Created 2023-05-26 18:51:07">2023-05-26</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">Updated</span><time class="post-meta-date-updated" datetime="2023-06-10T03:41:29.300Z" title="Updated 2023-06-10 11:41:29">2023-06-10</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="ES6-ES11学习笔记"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">Post View:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div><article class="post-content" id="article-container"><h2 id="ES6"><a href="#ES6" class="headerlink" title="ES6"></a>ES6</h2><h3 id="一、let-var-const"><a href="#一、let-var-const" class="headerlink" title="一、let var const"></a>一、let var const</h3><h5 id="1-let"><a href="#1-let" class="headerlink" title="1. let"></a>1. let</h5><ol>
<li>变量不能重复声明</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// let star = &#x27;罗志祥&#x27;;</span></span><br><span class="line"><span class="comment">// let star = &#x27;小猪&#x27;; //报错</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>块级作用域</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="keyword">let</span> girl = <span class="string">&#x27;周扬青&#x27;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// console.log(girl); // caught ReferenceError: girl is not defined</span></span><br></pre></td></tr></table></figure>

<ol start="3">
<li>不存在变量提升</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// console.log(song); //caught ReferenceError: Cannot access &#x27;song&#x27; before initialization</span></span><br><span class="line"><span class="comment">// let song = &#x27;恋爱达人&#x27;; </span></span><br></pre></td></tr></table></figure>

<ol start="4">
<li>不影响作用链</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="keyword">let</span> school = <span class="string">&#x27;尚硅谷&#x27;</span>;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">fn</span> () &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(school);</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">fn</span>();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol start="5">
<li>实践案例</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>点击 DIV 换色<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">crossorigin</span>=<span class="string">&quot;anonymous&quot;</span> <span class="attr">href</span>=<span class="string">&quot;https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css&quot;</span></span></span><br><span class="line"><span class="tag">        <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">        <span class="selector-class">.item</span> &#123;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">height</span>: <span class="number">50px</span>;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">border</span>: solid <span class="number">1px</span> <span class="built_in">rgb</span>(<span class="number">42</span>, <span class="number">156</span>, <span class="number">156</span>);</span></span><br><span class="line"><span class="language-css">            <span class="attribute">float</span>: left;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">margin-right</span>: <span class="number">10px</span>;</span></span><br><span class="line"><span class="language-css">        &#125;</span></span><br><span class="line"><span class="language-css">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;container&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">&quot;page-header&quot;</span>&gt;</span>点击切换颜色<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//获取div元素对象</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">let</span> items = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&#x27;item&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//遍历并绑定事件</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>;i&lt;items.<span class="property">length</span>;i++)&#123;</span></span><br><span class="line"><span class="language-javascript">            items[i].<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">//修改当前元素的背景颜色</span></span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// this.style.background = &#x27;pink&#x27;;</span></span></span><br><span class="line"><span class="language-javascript">                items[i].<span class="property">style</span>.<span class="property">background</span> = <span class="string">&#x27;pink&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">        </span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h5 id="2-const"><a href="#2-const" class="headerlink" title="2. const"></a>2. const</h5><ol>
<li>一定要赋初始值，否则报错</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> A; <span class="comment">// 报错</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>一般常量使用大写(潜规则)</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cosnt B = <span class="number">100</span>;</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>常量不能修改</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="variable constant_">NAME</span> = <span class="string">&#x27;小康&#x27;</span>;</span><br><span class="line"><span class="variable constant_">NAME</span> = <span class="string">&#x27;李白&#x27;</span>; <span class="comment">// 报错</span></span><br></pre></td></tr></table></figure>

<ol start="4">
<li><p>和<code>let</code>一样有块级作用域</p>
</li>
<li><p>对于数组和对象的元素修改, 不算做对常量的修改, 不会报错</p>
</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="variable constant_">TEAM</span> = [<span class="string">&#x27;UZI&#x27;</span>,<span class="string">&#x27;MXLG&#x27;</span>,<span class="string">&#x27;Ming&#x27;</span>,<span class="string">&#x27;Letme&#x27;</span>];</span><br><span class="line"><span class="comment">// TEAM.push(&#x27;Meiko&#x27;);</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable constant_">TEAM</span>);</span><br></pre></td></tr></table></figure>

<h3 id="二、模板字符串"><a href="#二、模板字符串" class="headerlink" title="二、模板字符串"></a>二、模板字符串</h3><h5 id="1-声明"><a href="#1-声明" class="headerlink" title="1. 声明"></a>1. 声明</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str = <span class="string">`我也是一个字符串哦!`</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str, <span class="keyword">typeof</span> str);</span><br></pre></td></tr></table></figure>

<h5 id="2-内容中可以直接出现换行符"><a href="#2-内容中可以直接出现换行符" class="headerlink" title="2. 内容中可以直接出现换行符"></a>2. 内容中可以直接出现换行符</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str = <span class="string">`&lt;ul&gt;</span></span><br><span class="line"><span class="string">            &lt;li&gt;沈腾&lt;/li&gt;</span></span><br><span class="line"><span class="string">            &lt;li&gt;玛丽&lt;/li&gt;</span></span><br><span class="line"><span class="string">            &lt;li&gt;魏翔&lt;/li&gt;</span></span><br><span class="line"><span class="string">            &lt;li&gt;艾伦&lt;/li&gt;</span></span><br><span class="line"><span class="string">            &lt;/ul&gt;`</span>;</span><br></pre></td></tr></table></figure>

<h5 id="3-变量拼接"><a href="#3-变量拼接" class="headerlink" title="3.变量拼接"></a>3.变量拼接</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> lovest = <span class="string">&#x27;魏翔&#x27;</span>;</span><br><span class="line"><span class="keyword">let</span> out = <span class="string">`<span class="subst">$&#123;lovest&#125;</span>是我心目中最搞笑的演员!!`</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(out);</span><br></pre></td></tr></table></figure>

<h3 id="三、简化对象的写法"><a href="#三、简化对象的写法" class="headerlink" title="三、简化对象的写法"></a>三、简化对象的写法</h3><blockquote>
<p>说明：ES6 允许在大括号里面, 直接写入变量和函数, 作为对象的属性和方法。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ES6 允许在大括号里面, 直接写入变量和函数, 作为对象的属性和方法</span></span><br><span class="line"><span class="keyword">let</span> name = <span class="string">&#x27;小康&#x27;</span>;</span><br><span class="line"><span class="keyword">let</span> change = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我们可以改变你！&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> school = &#123;</span><br><span class="line">  name,</span><br><span class="line">  change,</span><br><span class="line">  improve () &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我们可以提高你的技能&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(school);</span><br></pre></td></tr></table></figure>

<h3 id="四、变量的解构赋值"><a href="#四、变量的解构赋值" class="headerlink" title="四、变量的解构赋值"></a>四、变量的解构赋值</h3><blockquote>
<p>说明：ES6 允许按照一定模式从数组和对象中提取值, 对变量进行赋值。</p>
</blockquote>
<h5 id="1-数组的解构"><a href="#1-数组的解构" class="headerlink" title="1. 数组的解构"></a>1. 数组的解构</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="variable constant_">F4</span> = [<span class="string">&#x27;小沈阳&#x27;</span>, <span class="string">&#x27;刘能&#x27;</span>, <span class="string">&#x27;赵四&#x27;</span>, <span class="string">&#x27;宋小宝&#x27;</span>];</span><br><span class="line"><span class="keyword">let</span> [xiao, liu, zhao, song] = <span class="variable constant_">F4</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(xiao, liu, zhao, song);</span><br></pre></td></tr></table></figure>

<h5 id="2-对象的解构"><a href="#2-对象的解构" class="headerlink" title="2. 对象的解构"></a>2. 对象的解构</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> zhao = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;赵本山&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="string">&#x27;不详&#x27;</span>,</span><br><span class="line">  <span class="attr">xiaopin</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我可以演小品&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 解构赋值</span></span><br><span class="line"><span class="comment">// let &#123;name, age, xiaopin&#125; = zhao;</span></span><br></pre></td></tr></table></figure>

<h3 id="五、箭头函数"><a href="#五、箭头函数" class="headerlink" title="五、箭头函数"></a>五、箭头函数</h3><blockquote>
<p>说明：ES6 允许使用 箭头 (<code>=&gt;</code>) 定义函数。</p>
<ol>
<li>箭头函数适合与 this 无关的回调 如定时器、数组的方法回调。</li>
<li>箭头函数不适合与 this 有关的回调 如事件回调、对象的方法。</li>
</ol>
</blockquote>
<h5 id="1-this指向问题"><a href="#1-this指向问题" class="headerlink" title="1. this指向问题"></a>1. this指向问题</h5><ul>
<li>this 是静态的 this 始终指向函数声明时所在作用域下的 this 的值</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">getName</span> () &#123;</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> <span class="title function_">getName2</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 设置 window 对象的 name 属性</span></span><br><span class="line"> <span class="variable language_">window</span>.<span class="property">name</span> = <span class="string">&#x27;小康&#x27;</span>;</span><br><span class="line"> <span class="keyword">const</span> school = &#123;</span><br><span class="line">   <span class="attr">name</span>: <span class="string">&#x27;B-website&#x27;</span></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 直接调用</span></span><br><span class="line"> <span class="title function_">getName</span>();</span><br><span class="line"> <span class="title function_">getName2</span>();</span><br><span class="line"></span><br><span class="line"> <span class="comment">// call 方法调用</span></span><br><span class="line"> getName.<span class="title function_">call</span>(school); <span class="comment">// B-website</span></span><br><span class="line"> getName2.<span class="title function_">call</span>(school); <span class="comment">// 小康</span></span><br></pre></td></tr></table></figure>

<h5 id="2-不能作为构造实例化对象"><a href="#2-不能作为构造实例化对象" class="headerlink" title="2. 不能作为构造实例化对象"></a>2. 不能作为构造实例化对象</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="title function_">Person</span> = (<span class="params">name, age</span>) =&gt; &#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// let me = new Person(&#x27;xiao&#x27;, 30);</span></span><br><span class="line"><span class="comment">// console.log(me); // 报错</span></span><br></pre></td></tr></table></figure>

<h5 id="3-不能使用-arguments-变量"><a href="#3-不能使用-arguments-变量" class="headerlink" title="3. 不能使用 arguments 变量"></a>3. 不能使用 arguments 变量</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="title function_">fn</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">arguments</span>); <span class="comment">// 报错</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fn</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>);</span><br></pre></td></tr></table></figure>

<h5 id="4-箭头函数的简写"><a href="#4-箭头函数的简写" class="headerlink" title="4. 箭头函数的简写"></a>4. 箭头函数的简写</h5><ul>
<li><p>省略小括号, 当形参有且只有一个的时候</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="title function_">add</span> = n =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> n + n;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">add</span>(<span class="number">9</span>));</span><br></pre></td></tr></table></figure>
</li>
<li><p>省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略，而且语句的执行结果就是函数的返回值</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="title function_">pow</span> = n =&gt; n * n;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">pow</span>(<span class="number">8</span>));</span><br></pre></td></tr></table></figure>

<h5 id="5-实践案例"><a href="#5-实践案例" class="headerlink" title="5. 实践案例"></a>5. 实践案例</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>箭头函数实践<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-tag">div</span> &#123;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">background</span>: <span class="number">#58a</span>;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css">  </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;ad&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//需求-1  点击 div 2s 后颜色变成『粉色』</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 获取元素</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> ad = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;ad&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 绑定事件</span></span></span><br><span class="line"><span class="language-javascript">    ad.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 保存 this 的值</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// let_this = this;</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 定时器</span></span></span><br><span class="line"><span class="language-javascript">      <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">this</span>.<span class="property">style</span>.<span class="property">background</span> = <span class="string">&#x27;pink&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">      &#125;, <span class="number">2000</span>);</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//需求-2  从数组中返回偶数的元素</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">6</span>, <span class="number">9</span>, <span class="number">10</span>, <span class="number">100</span>, <span class="number">25</span>];</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// const result = arr.filter(function (item) &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   if (item % 2 === 0) &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//     return true;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   &#125; else &#123;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//     return false;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//   &#125;</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// &#125;);</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> result = arr.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =&gt;</span> item % <span class="number">2</span> === <span class="number">0</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 箭头函数适合与 this 无关的回调 如定时器、数组的方法回调</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 箭头函数不适合与 this 有关的回调 如事件回调、对象的方法</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="六、参数默认值"><a href="#六、参数默认值" class="headerlink" title="六、参数默认值"></a>六、参数默认值</h3><h5 id="1-形参初始值-具有默认值的的参数-一般位置要靠后-潜规则"><a href="#1-形参初始值-具有默认值的的参数-一般位置要靠后-潜规则" class="headerlink" title="1. 形参初始值 具有默认值的的参数, 一般位置要靠后 (潜规则)"></a>1. 形参初始值 具有默认值的的参数, 一般位置要靠后 (潜规则)</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add</span> (a, b, c = <span class="number">10</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> a + b + c;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> result = <span class="title function_">add</span>(<span class="number">1</span>, <span class="number">2</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span><br></pre></td></tr></table></figure>

<h5 id="2-与解构赋值结合"><a href="#2-与解构赋值结合" class="headerlink" title="2. 与解构赋值结合"></a>2. 与解构赋值结合</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">connect</span> (&#123; host, username, password, port &#125;) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(host);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(username);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(password);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(port);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">connect</span>(&#123;</span><br><span class="line">  <span class="attr">host</span>: <span class="string">&#x27;codeslive.top&#x27;</span>,</span><br><span class="line">  <span class="attr">username</span>: <span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">  <span class="attr">password</span>: <span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">  <span class="attr">port</span>: <span class="number">3306</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="七、rest-参数"><a href="#七、rest-参数" class="headerlink" title="七、rest 参数"></a>七、rest 参数</h3><blockquote>
<p>说明：ES6 引入 rest 参数, 用于获取函数的实参, 用来代替 arguments。</p>
</blockquote>
<h5 id="1-获取实参的方式"><a href="#1-获取实参的方式" class="headerlink" title="1. 获取实参的方式"></a>1. 获取实参的方式</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">date2</span> (...args) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(args); <span class="comment">// filter some every map </span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">date2</span>(<span class="string">&#x27;小白&#x27;</span>, <span class="string">&#x27;小红&#x27;</span>, <span class="string">&#x27;小黑&#x27;</span>);</span><br></pre></td></tr></table></figure>

<h5 id="2-参数必须要放到参数最后"><a href="#2-参数必须要放到参数最后" class="headerlink" title="2. 参数必须要放到参数最后"></a>2. 参数必须要放到参数最后</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span> (a, b, ...args) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(a);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(b);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(args);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fn</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>);</span><br></pre></td></tr></table></figure>

<h3 id="八、扩展运算符"><a href="#八、扩展运算符" class="headerlink" title="八、扩展运算符"></a>八、扩展运算符</h3><blockquote>
<p>说明：扩展运算符能将『数组』转换为逗号分隔的『参数序列』</p>
</blockquote>
<h5 id="1-基本使用"><a href="#1-基本使用" class="headerlink" title="1. 基本使用"></a>1. 基本使用</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明一个数组</span></span><br><span class="line"><span class="keyword">const</span> boys = [<span class="string">&#x27;猪猪侠&#x27;</span>, <span class="string">&#x27;熊大&#x27;</span>, <span class="string">&#x27;熊二&#x27;</span>];</span><br><span class="line"><span class="comment">// =&gt; &#x27;猪猪侠&#x27;,&#x27;熊大&#x27;, &#x27;熊二&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 声明一个函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">chunwan</span> () &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">arguments</span>);</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">chunwan</span>(...boys); <span class="comment">// &#x27;猪猪侠&#x27;,&#x27;熊大&#x27;, &#x27;熊二&#x27;</span></span><br></pre></td></tr></table></figure>

<h5 id="2-应用场景"><a href="#2-应用场景" class="headerlink" title="2. 应用场景"></a>2. 应用场景</h5><ul>
<li>数组的合并</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> food = [<span class="string">&#x27;包子&#x27;</span>, <span class="string">&#x27;馒头&#x27;</span>, <span class="string">&#x27;豆浆&#x27;</span>];</span><br><span class="line"><span class="keyword">const</span> goods = [<span class="string">&#x27;米饭&#x27;</span>, <span class="string">&#x27;白粥&#x27;</span>];</span><br><span class="line"><span class="keyword">const</span> foodGoods = [...food, ...goods];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(foodGoods);</span><br></pre></td></tr></table></figure>

<ul>
<li>数组的克隆</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> phone = [<span class="string">&#x27;meizu&#x27;</span>, <span class="string">&#x27;xiaomi&#x27;</span>, <span class="string">&#x27;huawei&#x27;</span>];</span><br><span class="line"><span class="keyword">const</span> phoneT = [...phone];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(phoneT);</span><br></pre></td></tr></table></figure>

<ul>
<li>将伪数组转为真正的数组</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> divs = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;div&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> divArr = [...divs];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(divArr); <span class="comment">// arguments</span></span><br></pre></td></tr></table></figure>

<h3 id="九、Symbol"><a href="#九、Symbol" class="headerlink" title="九、Symbol"></a>九、Symbol</h3><h5 id="1-基本使用-1"><a href="#1-基本使用-1" class="headerlink" title="1. 基本使用"></a>1. 基本使用</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//创建Symbol</span></span><br><span class="line"><span class="keyword">let</span> s = <span class="title class_">Symbol</span>();</span><br><span class="line"><span class="comment">// console.log(s, typeof s);</span></span><br><span class="line"><span class="keyword">let</span> s2 = <span class="title class_">Symbol</span>(<span class="string">&#x27;尚硅谷&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> s3 = <span class="title class_">Symbol</span>(<span class="string">&#x27;尚硅谷&#x27;</span>);</span><br><span class="line"><span class="comment">//Symbol.for 创建</span></span><br><span class="line"><span class="keyword">let</span> s4 = <span class="title class_">Symbol</span>.<span class="title function_">for</span>(<span class="string">&#x27;尚硅谷&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> s5 = <span class="title class_">Symbol</span>.<span class="title function_">for</span>(<span class="string">&#x27;尚硅谷&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//不能与其他数据进行运算</span></span><br><span class="line"><span class="comment">//    let result = s + 100;</span></span><br><span class="line"><span class="comment">//    let result = s &gt; 100;</span></span><br><span class="line"><span class="comment">//    let result = s + s;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// USONB  you are so niubility </span></span><br><span class="line"><span class="comment">// u  undefined</span></span><br><span class="line"><span class="comment">// s  string  symbol</span></span><br><span class="line"><span class="comment">// o  object</span></span><br><span class="line"><span class="comment">// n  null number</span></span><br><span class="line"><span class="comment">// b  boolean</span></span><br></pre></td></tr></table></figure>

<h5 id="2-Symbol创建对象属性"><a href="#2-Symbol创建对象属性" class="headerlink" title="2.Symbol创建对象属性"></a>2.Symbol创建对象属性</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 向对象中添加方法 up down</span></span><br><span class="line"><span class="keyword">let</span> game = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;俄罗斯方块&#x27;</span>,</span><br><span class="line">  <span class="attr">up</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123; &#125;,</span><br><span class="line">  <span class="attr">down</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123; &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 声明一个对象</span></span><br><span class="line"><span class="keyword">let</span> methods = &#123;</span><br><span class="line">  <span class="attr">up</span>: <span class="title class_">Symbol</span>(),</span><br><span class="line">  <span class="attr">down</span>: <span class="title class_">Symbol</span>()</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">game[methods.<span class="property">up</span>] = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我可以改变形状&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">game[methods.<span class="property">down</span>] = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我可以快速下降&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(game);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> youxi = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;狼人杀&#x27;</span>,</span><br><span class="line">  [<span class="title class_">Symbol</span>(<span class="string">&#x27;say&#x27;</span>)]: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我可以发言&#x27;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  [<span class="title class_">Symbol</span>(<span class="string">&#x27;zibao&#x27;</span>)]: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我可以自爆&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(youxi);</span><br></pre></td></tr></table></figure>

<h3 id="十、迭代器"><a href="#十、迭代器" class="headerlink" title="十、迭代器"></a>十、迭代器</h3><h5 id="1-基本使用-2"><a href="#1-基本使用-2" class="headerlink" title="1. 基本使用"></a>1. 基本使用</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明一个数组</span></span><br><span class="line"><span class="keyword">const</span> xiyou = [<span class="string">&#x27;唐僧&#x27;</span>, <span class="string">&#x27;孙悟空&#x27;</span>, <span class="string">&#x27;猪八戒&#x27;</span>, <span class="string">&#x27;沙僧&#x27;</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用 for...of 遍历数组</span></span><br><span class="line"><span class="comment">// for (let v of xiyou) &#123;</span></span><br><span class="line"><span class="comment">//   console.log(v);</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> iterator = xiyou[<span class="title class_">Symbol</span>.<span class="property">iterator</span>]();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用对象的 next 方法</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">// 唐僧</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">// 孙悟空 </span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">// 猪八戒</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">// 沙僧</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure>

<h5 id="2-自定义遍历对象"><a href="#2-自定义遍历对象" class="headerlink" title="2. 自定义遍历对象"></a>2. 自定义遍历对象</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明一个对象</span></span><br><span class="line"><span class="keyword">const</span> banji = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;终极一班&#x27;</span>,</span><br><span class="line">  <span class="attr">stus</span>: [</span><br><span class="line">    <span class="string">&#x27;xiaoming&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;xiaobao&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;xiaokang&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;knight&#x27;</span></span><br><span class="line">  ],</span><br><span class="line">  [<span class="title class_">Symbol</span>.<span class="property">iterator</span>] () &#123;</span><br><span class="line">    <span class="comment">// 索引变量</span></span><br><span class="line">    <span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line">    <span class="comment">// 保存 this</span></span><br><span class="line">    <span class="keyword">let</span> _this = <span class="variable language_">this</span>;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="attr">next</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">if</span> (index &lt; _this.<span class="property">stus</span>.<span class="property">length</span>) &#123;</span><br><span class="line">          <span class="keyword">const</span> result = &#123; <span class="attr">value</span>: _this.<span class="property">stus</span>[index], <span class="attr">done</span>: <span class="literal">false</span> &#125;;</span><br><span class="line">          <span class="comment">// 下标自增</span></span><br><span class="line">          index++;</span><br><span class="line">          <span class="comment">// 返回结果</span></span><br><span class="line">          <span class="keyword">return</span> result;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          <span class="keyword">return</span> &#123; <span class="attr">value</span>: <span class="literal">undefined</span>, <span class="attr">done</span>: <span class="literal">true</span> &#125;;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 遍历这个对象</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> v <span class="keyword">of</span> banji) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(v);</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="十一、生成器"><a href="#十一、生成器" class="headerlink" title="十一、生成器"></a>十一、生成器</h3><blockquote>
<p>说明：生成器其实就是一个特殊的函数</p>
<p>异步编程  纯回调函数  node fs  ajax mongodb</p>
</blockquote>
<h5 id="1-基本使用-3"><a href="#1-基本使用-3" class="headerlink" title="1.  基本使用"></a>1.  基本使用</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span>* gen () &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">111</span>);</span><br><span class="line">  <span class="keyword">yield</span> <span class="string">&#x27;一只没有耳朵&#x27;</span>;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">222</span>);</span><br><span class="line">  <span class="keyword">yield</span> <span class="string">&#x27;一只没有尾巴&#x27;</span>;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">333</span>);</span><br><span class="line">  <span class="keyword">yield</span> <span class="string">&#x27;真奇怪&#x27;</span>;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">444</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> interator = <span class="title function_">gen</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(interator.<span class="title function_">next</span>());</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(interator.<span class="title function_">next</span>());</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(interator.<span class="title function_">next</span>());</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(interator.<span class="title function_">next</span>());</span><br></pre></td></tr></table></figure>

<h5 id="2-生成器函数参数"><a href="#2-生成器函数参数" class="headerlink" title="2. 生成器函数参数"></a>2. 生成器函数参数</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span>* gen (arg) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(arg); <span class="comment">// BBB</span></span><br><span class="line">  <span class="keyword">let</span> one = <span class="keyword">yield</span> <span class="number">111</span>;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(one); </span><br><span class="line">  <span class="keyword">let</span> two = <span class="keyword">yield</span> <span class="number">222</span>;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(two);</span><br><span class="line">  <span class="keyword">let</span> three = <span class="keyword">yield</span> <span class="number">333</span>;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(three);</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 执行获取迭代器对象</span></span><br><span class="line"><span class="keyword">let</span> iterator = <span class="title function_">gen</span>(<span class="string">&#x27;AAA&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>()); <span class="comment">// AAA</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// next 方法可以传入实参</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>(<span class="string">&#x27;BBB&#x27;</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>(<span class="string">&#x27;CCC&#x27;</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>(<span class="string">&#x27;DDD&#x27;</span>));</span><br></pre></td></tr></table></figure>

<p>3.生成器函数实例</p>
<ul>
<li>实例1</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 异步编程 文件操作 网络操作 (ajax, request) 数据库操作</span></span><br><span class="line"><span class="comment">// 1s 后控制台输出 111  2s后输出 222  3s后输出 333 </span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 回调地狱</span></span><br><span class="line"><span class="comment">// setTimeout(() =&gt; &#123;</span></span><br><span class="line"><span class="comment">//   console.log(111);</span></span><br><span class="line"><span class="comment">//   setTimeout(() =&gt; &#123;</span></span><br><span class="line"><span class="comment">//     console.log(222);</span></span><br><span class="line"><span class="comment">//     setTimeout(() =&gt; &#123;</span></span><br><span class="line"><span class="comment">//       console.log(333);</span></span><br><span class="line"><span class="comment">//     &#125;, 3000);</span></span><br><span class="line"><span class="comment">//   &#125;, 2000);</span></span><br><span class="line"><span class="comment">// &#125;, 1000);</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">one</span> () &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">111</span>);</span><br><span class="line">    iterator.<span class="title function_">next</span>();</span><br><span class="line">  &#125;, <span class="number">1000</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">two</span> () &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">222</span>);</span><br><span class="line">    iterator.<span class="title function_">next</span>();</span><br><span class="line">  &#125;, <span class="number">2000</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">three</span> () &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">333</span>);</span><br><span class="line">    iterator.<span class="title function_">next</span>();</span><br><span class="line">  &#125;, <span class="number">3000</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span>* gen () &#123;</span><br><span class="line">  <span class="keyword">yield</span> <span class="title function_">one</span>();</span><br><span class="line">  <span class="keyword">yield</span> <span class="title function_">two</span>();</span><br><span class="line">  <span class="keyword">yield</span> <span class="title function_">three</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用生成器函数</span></span><br><span class="line"><span class="keyword">let</span> iterator = <span class="title function_">gen</span>();</span><br><span class="line">iterator.<span class="title function_">next</span>();</span><br></pre></td></tr></table></figure>

<ul>
<li>实例2</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//模拟获取  用户数据  订单数据  商品数据 </span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getUsers</span> () &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> data = <span class="string">&#x27;用户数据&#x27;</span>;</span><br><span class="line">    <span class="comment">// 调用 next 方法, 并且将数据传入</span></span><br><span class="line">    iterator.<span class="title function_">next</span>(data);</span><br><span class="line">  &#125;, <span class="number">1000</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getOrders</span> () &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> data = <span class="string">&#x27;订单数据&#x27;</span>;</span><br><span class="line">    <span class="comment">// 调用 next 方法, 并且将数据传入</span></span><br><span class="line">    iterator.<span class="title function_">next</span>(data);</span><br><span class="line">  &#125;, <span class="number">1000</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getGoods</span> () &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> data = <span class="string">&#x27;商品数据&#x27;</span>;</span><br><span class="line">    <span class="comment">// 调用 next 方法, 并且将数据传入</span></span><br><span class="line">    iterator.<span class="title function_">next</span>(data);</span><br><span class="line">  &#125;, <span class="number">1000</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span>* gen () &#123;</span><br><span class="line">  <span class="keyword">let</span> users = <span class="keyword">yield</span> <span class="title function_">getUsers</span>();</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(users);</span><br><span class="line">  <span class="keyword">let</span> orders = <span class="keyword">yield</span> <span class="title function_">getOrders</span>();</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(orders);</span><br><span class="line">  <span class="keyword">let</span> goods = <span class="keyword">yield</span> <span class="title function_">getGoods</span>();</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(goods);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用生成器函数</span></span><br><span class="line"><span class="keyword">let</span> iterator = <span class="title function_">gen</span>();</span><br><span class="line">iterator.<span class="title function_">next</span>();</span><br></pre></td></tr></table></figure>

<h3 id="十二、Promise"><a href="#十二、Promise" class="headerlink" title="十二、Promise"></a>十二、Promise</h3><h5 id="1-基本语法"><a href="#1-基本语法" class="headerlink" title="1. 基本语法"></a>1. 基本语法</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">        <span class="comment">//设置 p 对象的状态为失败, 并设置失败的值</span></span><br><span class="line">        <span class="title function_">reject</span>(<span class="string">&quot;出错啦!&quot;</span>);</span><br><span class="line">    &#125;, <span class="number">1000</span>)</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// p.then(function(value)&#123;&#125;, function(reason)&#123;</span></span><br><span class="line"><span class="comment">//     console.error(reason);</span></span><br><span class="line"><span class="comment">// &#125;);</span></span><br><span class="line"></span><br><span class="line">p.<span class="title function_">catch</span>(<span class="keyword">function</span>(<span class="params">reason</span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">warn</span>(reason);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h5 id="2-封装读取文件"><a href="#2-封装读取文件" class="headerlink" title="2. 封装读取文件"></a>2. 封装读取文件</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. 引入 fs 模块</span></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//2. 调用方法读取文件</span></span><br><span class="line"><span class="comment">// fs.readFile(&#x27;./resources/为学.md&#x27;, (err, data)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//     //如果失败, 则抛出错误</span></span><br><span class="line"><span class="comment">//     if(err) throw err;</span></span><br><span class="line"><span class="comment">//     //如果没有出错, 则输出内容</span></span><br><span class="line"><span class="comment">//     console.log(data.toString());</span></span><br><span class="line"><span class="comment">// &#125;);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//3. 使用 Promise 封装</span></span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span>(<span class="params">resolve, reject</span>)&#123;</span><br><span class="line">    fs.<span class="title function_">readFile</span>(<span class="string">&quot;./resources/为学.mda&quot;</span>, <span class="function">(<span class="params">err, data</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="comment">//判断如果失败</span></span><br><span class="line">        <span class="keyword">if</span>(err) <span class="title function_">reject</span>(err);</span><br><span class="line">        <span class="comment">//如果成功</span></span><br><span class="line">        <span class="title function_">resolve</span>(data);</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">p.<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">value</span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(value.<span class="title function_">toString</span>());</span><br><span class="line">&#125;, <span class="keyword">function</span>(<span class="params">reason</span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;读取失败!!&quot;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="3-封装AJAX"><a href="#3-封装AJAX" class="headerlink" title="3. 封装AJAX"></a>3. 封装AJAX</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">// 接口地址: https://api.apiopen.top/getJoke</span><br><span class="line">const p = new Promise((resolve, reject) =&gt; &#123;</span><br><span class="line">    //1. 创建对象</span><br><span class="line">    const xhr = new XMLHttpRequest();</span><br><span class="line"></span><br><span class="line">    //2. 初始化</span><br><span class="line">    xhr.open(&quot;GET&quot;, &quot;https://api.apiopen.top/getJ&quot;);</span><br><span class="line"></span><br><span class="line">    //3. 发送</span><br><span class="line">    xhr.send();</span><br><span class="line"></span><br><span class="line">    //4. 绑定事件, 处理响应结果</span><br><span class="line">    xhr.onreadystatechange = function () &#123;</span><br><span class="line">        //判断</span><br><span class="line">        if (xhr.readyState === 4) &#123;</span><br><span class="line">            //判断响应状态码 200-299</span><br><span class="line">            if (xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300) &#123;</span><br><span class="line">                //表示成功</span><br><span class="line">                resolve(xhr.response);</span><br><span class="line">            &#125; else &#123;</span><br><span class="line">                //如果失败</span><br><span class="line">                reject(xhr.status);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">//指定回调</span><br><span class="line">p.then(function(value)&#123;</span><br><span class="line">    console.log(value);</span><br><span class="line">&#125;, function(reason)&#123;</span><br><span class="line">    console.error(reason);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h5 id="4-then方法"><a href="#4-then方法" class="headerlink" title="4. then方法"></a>4. then方法</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//创建 promise 对象</span></span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">        <span class="title function_">resolve</span>(<span class="string">&#x27;用户数据&#x27;</span>);</span><br><span class="line">        <span class="comment">// reject(&#x27;出错啦&#x27;);</span></span><br><span class="line">    &#125;, <span class="number">1000</span>)</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">//调用 then 方法  then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定</span></span><br><span class="line"><span class="comment">//1. 如果回调函数中返回的结果是 非 promise 类型的属性, 状态为成功, 返回值为对象的成功的值</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// const result = p.then(value =&gt; &#123;</span></span><br><span class="line"><span class="comment">//     console.log(value);</span></span><br><span class="line"><span class="comment">//     //1. 非 promise 类型的属性</span></span><br><span class="line"><span class="comment">//     // return &#x27;iloveyou&#x27;;</span></span><br><span class="line"><span class="comment">//     //2. 是 promise 对象</span></span><br><span class="line"><span class="comment">//     // return new Promise((resolve, reject)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//     //     // resolve(&#x27;ok&#x27;);</span></span><br><span class="line"><span class="comment">//     //     reject(&#x27;error&#x27;);</span></span><br><span class="line"><span class="comment">//     // &#125;);</span></span><br><span class="line"><span class="comment">//     //3. 抛出错误</span></span><br><span class="line"><span class="comment">//     // throw new Error(&#x27;出错啦!&#x27;);</span></span><br><span class="line"><span class="comment">//     throw &#x27;出错啦!&#x27;;</span></span><br><span class="line"><span class="comment">// &#125;, reason=&gt;&#123;</span></span><br><span class="line"><span class="comment">//     console.warn(reason);</span></span><br><span class="line"><span class="comment">// &#125;);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//链式调用</span></span><br><span class="line">p.<span class="title function_">then</span>(<span class="function"><span class="params">value</span>=&gt;</span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="function"><span class="params">value</span>=&gt;</span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h5 id="5-catch方法"><a href="#5-catch方法" class="headerlink" title="5.  catch方法"></a>5.  catch方法</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">        <span class="comment">//设置 p 对象的状态为失败, 并设置失败的值</span></span><br><span class="line">        <span class="title function_">reject</span>(<span class="string">&quot;出错啦!&quot;</span>);</span><br><span class="line">    &#125;, <span class="number">1000</span>)</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// p.then(function(value)&#123;&#125;, function(reason)&#123;</span></span><br><span class="line"><span class="comment">//     console.error(reason);</span></span><br><span class="line"><span class="comment">// &#125;);</span></span><br><span class="line"></span><br><span class="line">p.<span class="title function_">catch</span>(<span class="keyword">function</span>(<span class="params">reason</span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">warn</span>(reason);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h5 id="6-promise实践"><a href="#6-promise实践" class="headerlink" title="6. promise实践"></a>6. promise实践</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入 fs 模块</span></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// fs.readFile(&#x27;./resources/为学.md&#x27;, (err, data1)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//     fs.readFile(&#x27;./resources/插秧诗.md&#x27;, (err, data2)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//         fs.readFile(&#x27;./resources/观书有感.md&#x27;, (err, data3)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//             let result = data1 + &#x27;\r\n&#x27; +data2  +&#x27;\r\n&#x27;+ data3;</span></span><br><span class="line"><span class="comment">//             console.log(result);</span></span><br><span class="line"><span class="comment">//         &#125;);</span></span><br><span class="line"><span class="comment">//     &#125;);</span></span><br><span class="line"><span class="comment">// &#125;);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//使用 promise 实现</span></span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    fs.<span class="title function_">readFile</span>(<span class="string">&quot;./resources/为学.md&quot;</span>, <span class="function">(<span class="params">err, data</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="title function_">resolve</span>(data);</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">p.<span class="title function_">then</span>(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        fs.<span class="title function_">readFile</span>(<span class="string">&quot;./resources/插秧诗.md&quot;</span>, <span class="function">(<span class="params">err, data</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="title function_">resolve</span>([value, data]);</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        fs.<span class="title function_">readFile</span>(<span class="string">&quot;./resources/观书有感.md&quot;</span>, <span class="function">(<span class="params">err, data</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="comment">//压入</span></span><br><span class="line">            value.<span class="title function_">push</span>(data);</span><br><span class="line">            <span class="title function_">resolve</span>(value);</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(value.<span class="title function_">join</span>(<span class="string">&#x27;\r\n&#x27;</span>));</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="十三、集合"><a href="#十三、集合" class="headerlink" title="十三、集合"></a>十三、集合</h3><h5 id="1-Set"><a href="#1-Set" class="headerlink" title="1. Set"></a>1. Set</h5><ul>
<li>声明一个Set</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> s = <span class="keyword">new</span> <span class="title class_">Set</span>();</span><br><span class="line"><span class="keyword">let</span> s2 = <span class="keyword">new</span> <span class="title class_">Set</span>([<span class="string">&#x27;大事儿&#x27;</span>,<span class="string">&#x27;小事儿&#x27;</span>,<span class="string">&#x27;好事儿&#x27;</span>,<span class="string">&#x27;坏事儿&#x27;</span>,<span class="string">&#x27;小事儿&#x27;</span>]);</span><br></pre></td></tr></table></figure>

<ul>
<li><p>Set API</p>
<ol>
<li>元素个数</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(s2.<span class="property">size</span>);</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>添加新的元素</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">s2.<span class="title function_">add</span>(<span class="string">&#x27;喜事儿&#x27;</span>);</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>删除元素</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">s2.delete(&#x27;坏事儿&#x27;);</span><br></pre></td></tr></table></figure>

<ol start="4">
<li>检测元素是否存在，存在返回<code>true</code>，不存在返回<code>false</code></li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(s2.<span class="title function_">has</span>(<span class="string">&#x27;糟心事&#x27;</span>));</span><br></pre></td></tr></table></figure>

<ol start="5">
<li>清空</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">s2.<span class="title function_">clear</span>();</span><br></pre></td></tr></table></figure>
</li>
<li><p>集合实践</p>
<ol>
<li>数组去重</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">1</span>, <span class="number">34</span>, <span class="number">56</span>, <span class="number">66</span>, <span class="number">78</span>, <span class="number">100</span>];</span><br><span class="line"><span class="comment">// 数组去重</span></span><br><span class="line"><span class="keyword">let</span> result = [...<span class="keyword">new</span> <span class="title class_">Set</span>(arr)];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>交集</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">   <span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">1</span>, <span class="number">34</span>, <span class="number">56</span>, <span class="number">66</span>, <span class="number">78</span>, <span class="number">100</span>];</span><br><span class="line">   <span class="keyword">let</span> arr2 = [<span class="number">1</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="number">4</span>, , <span class="number">56</span>, <span class="number">78</span>, <span class="number">100</span>, <span class="number">9</span>, <span class="number">8</span>];</span><br><span class="line">   <span class="comment">// 交集</span></span><br><span class="line">   <span class="keyword">let</span> result = [...<span class="keyword">new</span> <span class="title class_">Set</span>(arr)].<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">     <span class="keyword">let</span> s2 = <span class="keyword">new</span> <span class="title class_">Set</span>(arr2);</span><br><span class="line">     <span class="keyword">if</span> (s2.<span class="title function_">has</span>(item)) &#123;</span><br><span class="line">       <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">     &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">       <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">     &#125;</span><br><span class="line">   &#125;);</span><br><span class="line">  </span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span><br><span class="line"><span class="comment">// 链式写法</span></span><br><span class="line">   <span class="keyword">let</span> result = [...<span class="keyword">new</span> <span class="title class_">Set</span>(arr)].<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =&gt;</span> <span class="keyword">new</span> <span class="title class_">Set</span>(arr2).<span class="title function_">has</span>(item));</span><br><span class="line">  </span><br></pre></td></tr></table></figure></li>
</ul>
<h5 id="2-Map"><a href="#2-Map" class="headerlink" title="2. Map"></a>2. Map</h5><ul>
<li>基本使用</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明 Map</span></span><br><span class="line"><span class="keyword">let</span> m = <span class="keyword">new</span> <span class="title class_">Map</span>();</span><br><span class="line"><span class="comment">// 添加元素</span></span><br><span class="line">m.<span class="title function_">set</span>(<span class="string">&#x27;name&#x27;</span>, <span class="string">&#x27;小康&#x27;</span>);</span><br><span class="line">m.<span class="title function_">set</span>(<span class="string">&#x27;change&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我们可以改变你！！&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">let</span> key = &#123;</span><br><span class="line">  <span class="attr">home</span>: <span class="string">&#x27;LUODING&#x27;</span></span><br><span class="line">&#125;;</span><br><span class="line">m.<span class="title function_">set</span>(key, [<span class="string">&#x27;广州&#x27;</span>, <span class="string">&#x27;深圳&#x27;</span>]);</span><br><span class="line"></span><br><span class="line"><span class="comment">// size</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m);</span><br></pre></td></tr></table></figure>

<ul>
<li><p>Map API</p>
<ol>
<li>元素个数</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m.<span class="property">size</span>);</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>删除元素</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">m.<span class="title function_">delete</span>(<span class="string">&#x27;name&#x27;</span>);</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>获取元素</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m.<span class="title function_">get</span>(<span class="string">&#x27;change&#x27;</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m.<span class="title function_">get</span>(key));</span><br></pre></td></tr></table></figure>

<ol start="4">
<li>清空</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">m.<span class="title function_">clear</span>();</span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="十四、类"><a href="#十四、类" class="headerlink" title="十四、类"></a>十四、类</h3><h5 id="1-class类"><a href="#1-class类" class="headerlink" title="1. class类"></a>1. class类</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 手机</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">Phone</span> (brand, price) &#123;</span><br><span class="line">   <span class="variable language_">this</span>.<span class="property">brand</span> = brand;</span><br><span class="line">   <span class="variable language_">this</span>.<span class="property">price</span> = price;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 添加方法</span></span><br><span class="line"> <span class="title class_">Phone</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">call</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我可以打电话！！！&#x27;</span>);</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 实例化对象</span></span><br><span class="line"> <span class="keyword">let</span> <span class="title class_">Huawei</span> = <span class="keyword">new</span> <span class="title class_">Phone</span>(<span class="string">&#x27;华为&#x27;</span>, <span class="number">5999</span>);</span><br><span class="line"> <span class="title class_">Huawei</span>.<span class="title function_">call</span>();</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Huawei</span>);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// class</span></span><br><span class="line"> <span class="keyword">class</span> <span class="title class_">Showji</span> &#123;</span><br><span class="line">   <span class="comment">// 构造方法 名字不能修改</span></span><br><span class="line">   <span class="title function_">constructor</span>(<span class="params">brand, price</span>) &#123;</span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">brand</span> = brand;</span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">price</span> = price;</span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line">   <span class="comment">// 方法必须使用该语法, 不能使用 ES5 的对象完整形式</span></span><br><span class="line">   call () &#123;</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我可以打电话!!&#x27;</span>);</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> onePlus = <span class="keyword">new</span> <span class="title class_">Showji</span>(<span class="string">&#x27;1+&#x27;</span>, <span class="number">1999</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(onePlus);</span><br></pre></td></tr></table></figure>

<h5 id="2-class类的静态成员"><a href="#2-class类的静态成员" class="headerlink" title="2. class类的静态成员"></a>2. class类的静态成员</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Phone</span> &#123;</span><br><span class="line">  <span class="comment">// 静态属性</span></span><br><span class="line">  <span class="keyword">static</span> name = <span class="string">&#x27;手机&#x27;</span>;</span><br><span class="line">  <span class="keyword">static</span> change () &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我可以改变世界&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> nokia = <span class="keyword">new</span> <span class="title class_">Phone</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(nokia.<span class="property">name</span>); <span class="comment">// undefined</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Phone</span>.<span class="property">name</span>); <span class="comment">// 手机</span></span><br></pre></td></tr></table></figure>

<h5 id="3-class类继承"><a href="#3-class类继承" class="headerlink" title="3. class类继承"></a>3. class类继承</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Phone</span> &#123;</span><br><span class="line">  <span class="comment">// 构造方法</span></span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">brand, price</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">brand</span> = brand;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">price</span> = price;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">SmartPhone</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Phone</span> &#123;</span><br><span class="line">  <span class="comment">// 构造方法</span></span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">brand, price, color, size</span>) &#123;</span><br><span class="line">    <span class="variable language_">super</span>(brand, price);</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">color</span> = color;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">size</span> = size;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  photo () &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;拍照&#x27;</span>);</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">  playGame () &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;玩游戏&#x27;</span>);</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">  call () &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我可以进行视频通话&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> xiaomi = <span class="keyword">new</span> <span class="title class_">SmartPhone</span>(<span class="string">&#x27;小米&#x27;</span>, <span class="number">799</span>, <span class="string">&#x27;黑色&#x27;</span>, <span class="string">&#x27;4.7inch&#x27;</span>);</span><br><span class="line">xiaomi.<span class="title function_">call</span>(); <span class="comment">// 我可以进行视频通话</span></span><br><span class="line">xiaomi.<span class="title function_">photo</span>(); <span class="comment">// 拍照</span></span><br><span class="line">xiaomi.<span class="title function_">playGame</span>(); <span class="comment">// 玩游戏</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="4-class的get和set"><a href="#4-class的get和set" class="headerlink" title="4. class的get和set"></a>4. class的get和set</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Phone</span> &#123;</span><br><span class="line">  get price () &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;价格属性被获取了&#x27;</span>);</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;iloveyou&#x27;</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  set price (newVal) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;价格属性被修改了&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 实例化对象</span></span><br><span class="line"><span class="keyword">let</span> s = <span class="keyword">new</span> <span class="title class_">Phone</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(s.<span class="property">price</span>);</span><br><span class="line"></span><br><span class="line">s.<span class="property">price</span> = <span class="string">&#x27;free&#x27;</span>;</span><br></pre></td></tr></table></figure>

<h3 id="十五、数值扩展"><a href="#十五、数值扩展" class="headerlink" title="十五、数值扩展"></a>十五、数值扩展</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Number.EPSILON 是 JavaScript 表示的最小精度</span></span><br><span class="line"><span class="comment">// EPSILON 属性的值接近于  2.2204460492503130808472633361816E-16</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">equal</span> (a, b) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="title class_">Math</span>.<span class="title function_">abs</span>(a - b) &lt; <span class="title class_">Number</span>.<span class="property">EPSILON</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// console.log(0.1 + 0.2 === 0.3); // false</span></span><br><span class="line"><span class="comment">// console.log(equal(0.1 + 0.2, 0.3)); // true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//1. 二进制和八进制</span></span><br><span class="line"><span class="comment">// let b = 0b1010;</span></span><br><span class="line"><span class="comment">// let o = 0o777;</span></span><br><span class="line"><span class="comment">// let d = 100;</span></span><br><span class="line"><span class="comment">// let x = 0xff;</span></span><br><span class="line"><span class="comment">// console.log(x);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. Number.isFinite 检测一个数值是否为有限数</span></span><br><span class="line"><span class="comment">// console.log(Number.isFinite(100));</span></span><br><span class="line"><span class="comment">// console.log(Number.isFinite(100 / 0));</span></span><br><span class="line"><span class="comment">// console.log(Number.isFinite(Infinity));</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. Number.isNaN 检测一个数是否为 NaN</span></span><br><span class="line"><span class="comment">// console.log(Number.isNaN(123));</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 4. Number.parseInt Number.parseFloat字符串转整数</span></span><br><span class="line"><span class="comment">// console.log(Number.parseInt(`521love`)); // 521</span></span><br><span class="line"><span class="comment">// console.log(Number.parseFloat(`12345加油`)); // 12345</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 5. Number.isInteger 判断一个数是否为整数</span></span><br><span class="line"><span class="comment">// console.log(Number.isInteger(5));</span></span><br><span class="line"><span class="comment">// console.log(Number.isInteger(2.5));</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 6. Math.trunc 将数字的小数部分抹掉 </span></span><br><span class="line"><span class="comment">// console.log(Math.trunc(3.5));</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 7. Math.sign 判断一个数到底是正数 负数 还是零</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Math</span>.<span class="title function_">sign</span>(<span class="number">100</span>)); <span class="comment">// 1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Math</span>.<span class="title function_">sign</span>(<span class="number">0</span>)); <span class="comment">// 0</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Math</span>.<span class="title function_">sign</span>(-<span class="number">20000</span>)); <span class="comment">// -1</span></span><br></pre></td></tr></table></figure>

<h3 id="十六、对象方法扩展"><a href="#十六、对象方法扩展" class="headerlink" title="十六、对象方法扩展"></a>十六、对象方法扩展</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. Object.is 判断两个值是否完全相等</span></span><br><span class="line"><span class="comment">// console.log(Object.is(120, 120)); // true</span></span><br><span class="line"><span class="comment">// console.log(Object.is(NaN, NaN)); // true</span></span><br><span class="line"><span class="comment">// console.log(NaN === NaN); // false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. Object.assign 对象的合并</span></span><br><span class="line"><span class="keyword">const</span> config1 = &#123;</span><br><span class="line">  <span class="attr">host</span>: <span class="string">&#x27;localhost&#x27;</span>,</span><br><span class="line">  <span class="attr">port</span>: <span class="number">3306</span>,</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">  <span class="attr">pass</span>: <span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">  <span class="attr">test</span>: <span class="string">&#x27;test&#x27;</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> config2 = &#123;</span><br><span class="line">  <span class="attr">host</span>: <span class="string">&#x27;http://codeslive.top&#x27;</span>,</span><br><span class="line">  <span class="attr">port</span>: <span class="string">&#x27;33060&#x27;</span>,</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;xiaokang&#x27;</span>,</span><br><span class="line">  <span class="attr">pass</span>: <span class="string">&#x27;iloveyou&#x27;</span>,</span><br><span class="line">  <span class="attr">test2</span>: <span class="string">&#x27;test2&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">assign</span>(config1, config2));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. Object.setPrototypeOf 设置原型对象 Object.getPrototypeof</span></span><br><span class="line"><span class="keyword">const</span> school = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;小康&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> cities = &#123;</span><br><span class="line">  <span class="attr">xiaoqu</span>: [<span class="string">&#x27;beijing&#x27;</span>, <span class="string">&#x27;shanghai&#x27;</span>, <span class="string">&#x27;shenzhen&#x27;</span>]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">setPrototypeOf</span>(school, cities);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">getPrototypeOf</span>(school));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(school);</span><br></pre></td></tr></table></figure>

<h3 id="十七、模块化"><a href="#十七、模块化" class="headerlink" title="十七、模块化"></a>十七、模块化</h3><h5 id="1-文件引入"><a href="#1-文件引入" class="headerlink" title="1. 文件引入"></a>1. 文件引入</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. 通用的导入方式</span></span><br><span class="line"><span class="comment">//引入 m1.js 模块内容</span></span><br><span class="line"><span class="comment">// import * as m1 from &quot;./src/js/m1.js&quot;;</span></span><br><span class="line"><span class="comment">// //引入 m2.js 模块内容</span></span><br><span class="line"><span class="comment">// import * as m2 from &quot;./src/js/m2.js&quot;;</span></span><br><span class="line"><span class="comment">// //引入 m3.js </span></span><br><span class="line"><span class="comment">// import * as m3 from &quot;./src/js/m3.js&quot;;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//2. 解构赋值形式</span></span><br><span class="line"><span class="comment">// import &#123;school, teach&#125; from &quot;./src/js/m1.js&quot;;</span></span><br><span class="line"><span class="comment">// import &#123;school as guigu, findJob&#125; from &quot;./src/js/m2.js&quot;;</span></span><br><span class="line"><span class="comment">// import &#123;default as m3&#125; from &quot;./src/js/m3.js&quot;;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//3. 简便形式  针对默认暴露</span></span><br><span class="line"><span class="comment">// import m3 from &quot;./src/js/m3.js&quot;;</span></span><br><span class="line"><span class="comment">// console.log(m3);</span></span><br></pre></td></tr></table></figure>

<h5 id="2-babel转换"><a href="#2-babel转换" class="headerlink" title="2. babel转换"></a>2. babel转换</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">        1. 安装工具 npm i babel-cli babel-preset-env browserify(webpack) -D</span></span><br><span class="line"><span class="comment">        2. 编译 npx babel src/js -d dist/js --presets=babel-preset-env</span></span><br><span class="line"><span class="comment">        3. 打包 npx browserify dist/js/app.js -o dist/bundle.js</span></span><br><span class="line"><span class="comment">     --&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;dist/bundle.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="ES7"><a href="#ES7" class="headerlink" title="ES7"></a>ES7</h2><h3 id="一、includes"><a href="#一、includes" class="headerlink" title="一、includes"></a>一、includes</h3><blockquote>
<p>说明：<code>includes()</code> 是 ES7 中新增的数组方法，用于判断数组中是否包含某个值，并返回一个布尔值。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// includes </span></span><br><span class="line"><span class="keyword">const</span> mingzhu = [<span class="string">&#x27;西游记&#x27;</span>, <span class="string">&#x27;红楼梦&#x27;</span>, <span class="string">&#x27;三国演义&#x27;</span>, <span class="string">&#x27;水浒传&#x27;</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 判断</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(mingzhu.<span class="title function_">includes</span>(<span class="string">&#x27;西游记&#x27;</span>)); <span class="comment">// true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(mingzhu.<span class="title function_">includes</span>(<span class="string">&#x27;金瓶梅&#x27;</span>)); <span class="comment">// false</span></span><br></pre></td></tr></table></figure>

<h3 id="二、双星号（-）"><a href="#二、双星号（-）" class="headerlink" title="二、双星号（**）"></a>二、双星号（**）</h3><blockquote>
<p>说明：在 ES7 中，<code>双星号（**）</code>是指数运算符。它可以用于计算某个数的幂次方</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">2</span> ** <span class="number">10</span>); <span class="comment">//1024</span></span><br></pre></td></tr></table></figure>

<h2 id="ES8"><a href="#ES8" class="headerlink" title="ES8"></a>ES8</h2><h3 id="一、async函数"><a href="#一、async函数" class="headerlink" title="一、async函数"></a>一、async函数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// async 函数</span></span><br><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">fn</span> () &#123;</span><br><span class="line">  <span class="comment">// 返回一个字符串</span></span><br><span class="line">  <span class="comment">// return &#x27;xiaokang&#x27;;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 返回的结果不是一个 Promise 类型的对象, 返回的结果就是成功 Promise 对象</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// return;  // fulfilled undefined</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 抛出错误, 返回结果是一个失败的 Promise</span></span><br><span class="line">  <span class="comment">// throw new Error(&#x27;出错了&#x27;); // 报错并返回失败的promise对象</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 返回的结果如果是一个 Promise 对象</span></span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="title function_">resolve</span>(<span class="string">&#x27;成功的数据&#x27;</span>);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> result = <span class="title function_">fn</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用 then 方法</span></span><br><span class="line">result.<span class="title function_">then</span>(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(value);</span><br><span class="line">&#125;, <span class="function"><span class="params">reason</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">warn</span>(reason);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="二、await函数"><a href="#二、await函数" class="headerlink" title="二、await函数"></a>二、await函数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建 promise 对象</span></span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">resolve</span>(<span class="string">&quot;用户数据&quot;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// await 要放在 async 函数中</span></span><br><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">main</span> () &#123;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> result = <span class="keyword">await</span> p;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span><br><span class="line"></span><br><span class="line">  &#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(e);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用函数</span></span><br><span class="line"><span class="title function_">main</span>();</span><br></pre></td></tr></table></figure>

<h3 id="三、async和await结合读取文件"><a href="#三、async和await结合读取文件" class="headerlink" title="三、async和await结合读取文件"></a>三、async和await结合读取文件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 引入 fs 模块</span></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> &#123; resolve &#125; = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 读取 为学</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">readWeiXue</span> () &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    fs.<span class="title function_">readFile</span>(<span class="string">&#x27;./resources/为学.md&#x27;</span>, <span class="function">(<span class="params">err, data</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// 如果失败</span></span><br><span class="line">      <span class="keyword">if</span> (err) <span class="title function_">reject</span>(err);</span><br><span class="line">      <span class="comment">// 如果成功</span></span><br><span class="line">      <span class="title function_">resolve</span>(data);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">readChaYangShi</span> () &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    fs.<span class="title function_">readFile</span>(<span class="string">&#x27;./resources/插秧诗.md&#x27;</span>, <span class="function">(<span class="params">err, data</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// 如果失败</span></span><br><span class="line">      <span class="keyword">if</span> (err) <span class="title function_">reject</span>(err);</span><br><span class="line">      <span class="comment">// 如果成功</span></span><br><span class="line">      <span class="title function_">resolve</span>(data);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">readGuanShu</span> () &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    fs.<span class="title function_">readFile</span>(<span class="string">&#x27;./resources/观书有感.md&#x27;</span>, <span class="function">(<span class="params">err, data</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// 如果失败</span></span><br><span class="line">      <span class="keyword">if</span> (err) <span class="title function_">reject</span>(err);</span><br><span class="line">      <span class="comment">// 如果成功</span></span><br><span class="line">      <span class="title function_">resolve</span>(data);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 声明一个 async 函数</span></span><br><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">main</span> () &#123;</span><br><span class="line">  <span class="comment">// 获取为学内容</span></span><br><span class="line">  <span class="keyword">let</span> weixue = <span class="keyword">await</span> <span class="title function_">readWeiXue</span>();</span><br><span class="line">  <span class="comment">// 获取插秧诗的内容</span></span><br><span class="line">  <span class="keyword">let</span> chayang = <span class="keyword">await</span> <span class="title function_">readChaYangShi</span>();</span><br><span class="line">  <span class="comment">// 获取观书有感</span></span><br><span class="line">  <span class="keyword">let</span> guanshu = <span class="keyword">await</span> <span class="title function_">readGuanShu</span>();</span><br><span class="line"></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(weixue.<span class="title function_">toString</span>());</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(chayang.<span class="title function_">toString</span>());</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(guanshu.<span class="title function_">toString</span>());</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用函数</span></span><br><span class="line"><span class="title function_">main</span>();</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="四、async与await封装AJAX"><a href="#四、async与await封装AJAX" class="headerlink" title="四、async与await封装AJAX"></a>四、async与await封装AJAX</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">  <span class="comment">// 发送 AJAX 请求, 返回的结果是 Promise 对象</span></span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">sendAJAX</span> (url) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// 1. 创建对象</span></span><br><span class="line">      <span class="keyword">const</span> x = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>();</span><br><span class="line"></span><br><span class="line">      <span class="comment">// 2. 初始化</span></span><br><span class="line">      x.<span class="title function_">open</span>(<span class="string">&#x27;GET&#x27;</span>, url);</span><br><span class="line"></span><br><span class="line">      <span class="comment">// 3. 发送</span></span><br><span class="line">      x.<span class="title function_">send</span>();</span><br><span class="line"></span><br><span class="line">      <span class="comment">// 4. 事件绑定</span></span><br><span class="line">      x.<span class="property">onreadystatechange</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">if</span> (x.<span class="property">readyState</span> === <span class="number">4</span>) &#123;</span><br><span class="line">          <span class="keyword">if</span> (x.<span class="property">status</span> &gt;= <span class="number">200</span> &amp;&amp; x.<span class="property">status</span> &lt; <span class="number">300</span>) &#123;</span><br><span class="line">            <span class="comment">// 成功</span></span><br><span class="line">            <span class="title function_">resolve</span>(x.<span class="property">response</span>);</span><br><span class="line">          &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="comment">// 如果失败</span></span><br><span class="line">            <span class="title function_">reject</span>(x.<span class="property">status</span>);</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// async 与 await 测试</span></span><br><span class="line">  <span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">main</span> () &#123;</span><br><span class="line">    <span class="comment">// 发送 AJAX 请求</span></span><br><span class="line">    <span class="keyword">let</span> result = <span class="keyword">await</span> <span class="title function_">sendAJAX</span>(<span class="string">&#x27;https://b.codeslive.top/api/public/book/findFav5&#x27;</span>);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="title function_">main</span>();</span><br></pre></td></tr></table></figure>

<h3 id="五、对象方法扩展"><a href="#五、对象方法扩展" class="headerlink" title="五、对象方法扩展"></a>五、对象方法扩展</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明对象</span></span><br><span class="line"><span class="keyword">const</span> school = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;xiaokang&#x27;</span>,</span><br><span class="line">  <span class="attr">cities</span>: [<span class="string">&#x27;beijing&#x27;</span>, <span class="string">&#x27;shanghai&#x27;</span>, <span class="string">&#x27;shenzhen&#x27;</span>],</span><br><span class="line">  <span class="attr">xueke</span>: [<span class="string">&#x27;前端&#x27;</span>, <span class="string">&#x27;Java&#x27;</span>, <span class="string">&#x27;大数据&#x27;</span>, <span class="string">&#x27;运维&#x27;</span>]</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取对象所有的键</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">keys</span>(school));</span><br><span class="line"><span class="comment">// 获取对象所有的值</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">values</span>(school));</span><br><span class="line"><span class="comment">// entries</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">entries</span>(school));</span><br><span class="line"><span class="comment">// 创建 Map</span></span><br><span class="line"><span class="keyword">const</span> m = <span class="keyword">new</span> <span class="title class_">Map</span>(<span class="title class_">Object</span>.<span class="title function_">entries</span>(school));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m.<span class="title function_">get</span>(<span class="string">&#x27;cities&#x27;</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象属性描述对象</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">getOwnPropertyDescriptors</span>(school));</span><br></pre></td></tr></table></figure>

<h2 id="ES9"><a href="#ES9" class="headerlink" title="ES9"></a>ES9</h2><h3 id="一、对象展开"><a href="#一、对象展开" class="headerlink" title="一、对象展开"></a>一、对象展开</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">  Rest 参数 spread 扩展运算符在 ES6 中已经引入, 不过ES6 中只针对于数组, 在 ES9 中对象提供了像数组一样的 rest 参数和扩展运算符</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// rest 参数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">connect</span> (&#123; host, port, ...user &#125;) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(host);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(port);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(user);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">connect</span>(&#123;</span><br><span class="line">  <span class="attr">host</span>: <span class="string">&#x27;127.0.0.1&#x27;</span>,</span><br><span class="line">  <span class="attr">port</span>: <span class="number">3306</span>,</span><br><span class="line">  <span class="attr">username</span>: <span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">  <span class="attr">password</span>: <span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">  <span class="attr">type</span>: <span class="string">&#x27;master&#x27;</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象合并</span></span><br><span class="line"><span class="keyword">const</span> skillOne = &#123;</span><br><span class="line">  <span class="attr">q</span>: <span class="string">&#x27;天音波&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> skillTwo = &#123;</span><br><span class="line">  <span class="attr">w</span>: <span class="string">&#x27;金钟罩&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> skillThree = &#123;</span><br><span class="line">  <span class="attr">e</span>: <span class="string">&#x27;天雷破&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> skillFour = &#123;</span><br><span class="line">  <span class="attr">r</span>: <span class="string">&#x27;猛龙摆尾&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mangseng = &#123; ...skillOne, skillTwo, skillThree, skillFour &#125;;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(mangseng);</span><br></pre></td></tr></table></figure>

<h3 id="二、正则命名分组"><a href="#二、正则命名分组" class="headerlink" title="二、正则命名分组"></a>二、正则命名分组</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明一个字符串</span></span><br><span class="line"><span class="comment">// let str = `&lt;a href=&quot;https://codeslive.top&quot;&gt;小康&lt;/a&gt;`;</span></span><br><span class="line"><span class="comment">// // 提前 url 与 标签文本</span></span><br><span class="line"><span class="comment">// const reg = /&lt;a href=&quot;(.*)&quot;&gt;(.*)&lt;\/a&gt;/;</span></span><br><span class="line"><span class="comment">// // 执行</span></span><br><span class="line"><span class="comment">// const result = reg.exec(str);</span></span><br><span class="line"><span class="comment">// console.log(result);</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> str = <span class="string">`&lt;a href=&quot;https://codeslive.top&quot;&gt;小康&lt;/a&gt;`</span>;</span><br><span class="line"><span class="comment">// 分组命名</span></span><br><span class="line"><span class="keyword">const</span> reg = <span class="regexp">/&lt;a href=&quot;(?&lt;url&gt;.*)&quot;&gt;(?&lt;text&gt;.*)&lt;\/a&gt;/</span>;</span><br><span class="line"><span class="keyword">const</span> result = reg.<span class="title function_">exec</span>(str);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result.<span class="property">groups</span>.<span class="property">url</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result.<span class="property">groups</span>.<span class="property">text</span>);</span><br></pre></td></tr></table></figure>

<h3 id="三、正则断言"><a href="#三、正则断言" class="headerlink" title="三、正则断言"></a>三、正则断言</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明字符串</span></span><br><span class="line"><span class="keyword">let</span> str = <span class="string">&#x27;JS5211314你知道么555啦啦啦&#x27;</span>;</span><br><span class="line"><span class="comment">// 正向断言</span></span><br><span class="line"><span class="keyword">const</span> reg = <span class="regexp">/\d+(?=啦)/</span>;</span><br><span class="line"><span class="keyword">const</span> result = reg.<span class="title function_">exec</span>(str);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 反向断言</span></span><br><span class="line"><span class="keyword">const</span> reg2 = <span class="regexp">/(?&lt;=么)\d+/</span>;</span><br><span class="line"><span class="keyword">const</span> result2 = reg2.<span class="title function_">exec</span>(str);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result2);</span><br></pre></td></tr></table></figure>

<h3 id="四、正则dotAll模式"><a href="#四、正则dotAll模式" class="headerlink" title="四、正则dotAll模式"></a>四、正则dotAll模式</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//dot  .  元字符  除换行符以外的任意单个字符</span></span><br><span class="line"><span class="keyword">let</span> str = <span class="string">`</span></span><br><span class="line"><span class="string">&lt;ul&gt;</span></span><br><span class="line"><span class="string">    &lt;li&gt;</span></span><br><span class="line"><span class="string">        &lt;a&gt;肖生克的救赎&lt;/a&gt;</span></span><br><span class="line"><span class="string">        &lt;p&gt;上映日期: 1994-09-10&lt;/p&gt;</span></span><br><span class="line"><span class="string">    &lt;/li&gt;</span></span><br><span class="line"><span class="string">    &lt;li&gt;</span></span><br><span class="line"><span class="string">        &lt;a&gt;阿甘正传&lt;/a&gt;</span></span><br><span class="line"><span class="string">        &lt;p&gt;上映日期: 1994-07-06&lt;/p&gt;</span></span><br><span class="line"><span class="string">    &lt;/li&gt;</span></span><br><span class="line"><span class="string">&lt;/ul&gt;`</span>;</span><br><span class="line"><span class="comment">//声明正则</span></span><br><span class="line"><span class="comment">// const reg = /&lt;li&gt;\s+&lt;a&gt;(.*?)&lt;\/a&gt;\s+&lt;p&gt;(.*?)&lt;\/p&gt;/;</span></span><br><span class="line"><span class="keyword">const</span> reg = <span class="regexp">/&lt;li&gt;.*?&lt;a&gt;(.*?)&lt;\/a&gt;.*?&lt;p&gt;(.*?)&lt;\/p&gt;/g</span>s;</span><br><span class="line"><span class="comment">//执行匹配</span></span><br><span class="line"><span class="comment">// const result = reg.exec(str);</span></span><br><span class="line"><span class="keyword">let</span> result;</span><br><span class="line"><span class="keyword">let</span> data = [];</span><br><span class="line"><span class="keyword">while</span>(result = reg.<span class="title function_">exec</span>(str))&#123;</span><br><span class="line">    data.<span class="title function_">push</span>(&#123;<span class="attr">title</span>: result[<span class="number">1</span>], <span class="attr">time</span>: result[<span class="number">2</span>]&#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//输出结果</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(data);</span><br></pre></td></tr></table></figure>

<h2 id="ES10"><a href="#ES10" class="headerlink" title="ES10"></a>ES10</h2><h3 id="一、Object-fromEntries"><a href="#一、Object-fromEntries" class="headerlink" title="一、Object.fromEntries"></a>一、Object.fromEntries</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 二维数组 Object.fromEntries：数组转对象</span></span><br><span class="line"><span class="keyword">const</span> result = <span class="title class_">Object</span>.<span class="title function_">fromEntries</span>([</span><br><span class="line">  [<span class="string">&#x27;name&#x27;</span>, <span class="string">&#x27;xiaokang&#x27;</span>],</span><br><span class="line">  [<span class="string">&#x27;xueke&#x27;</span>, <span class="string">&#x27;java,web&#x27;</span>]</span><br><span class="line">]);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象转数组 Object.entries ES8</span></span><br><span class="line"><span class="keyword">const</span> arr = <span class="title class_">Object</span>.<span class="title function_">entries</span>(&#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;xiaokang&#x27;</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr); <span class="comment">// 对象转数字</span></span><br></pre></td></tr></table></figure>

<h3 id="二、trimStart与trimEnd"><a href="#二、trimStart与trimEnd" class="headerlink" title="二、trimStart与trimEnd"></a>二、trimStart与trimEnd</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// trim</span></span><br><span class="line"><span class="keyword">let</span> str = <span class="string">&#x27;    iloveyou      &#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">trimStart</span>()); <span class="comment">// 去除开始的空格</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">trimEnd</span>()); <span class="comment">// 去除结尾的空格</span></span><br></pre></td></tr></table></figure>

<h3 id="三、Array-prototype-flat与flatMap"><a href="#三、Array-prototype-flat与flatMap" class="headerlink" title="三、Array.prototype.flat与flatMap"></a>三、Array.prototype.flat与flatMap</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// flat 平</span></span><br><span class="line"><span class="comment">// 将多维数组转换为低维数组</span></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>, [<span class="number">5</span>, <span class="number">6</span>]];</span><br><span class="line"><span class="keyword">const</span> arr2 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, [<span class="number">7</span>, <span class="number">8</span>, <span class="number">9</span>]];</span><br><span class="line"><span class="comment">// 参数为深度 是一个数字</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">flat</span>(<span class="number">2</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// flatMap</span></span><br><span class="line"><span class="keyword">const</span> arr3 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="keyword">const</span> result = arr3.<span class="title function_">flatMap</span>(<span class="function"><span class="params">item</span> =&gt;</span> [item * <span class="number">10</span>]);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span><br></pre></td></tr></table></figure>

<h3 id="四、Symbol-prototype-description"><a href="#四、Symbol-prototype-description" class="headerlink" title="四、Symbol.prototype.description"></a>四、Symbol.prototype.description</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建 Symbol</span></span><br><span class="line"><span class="keyword">let</span> s = <span class="title class_">Symbol</span>(<span class="string">&#x27;小康&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(s.<span class="property">description</span>); <span class="comment">// 小康</span></span><br></pre></td></tr></table></figure>

<h2 id="ES11"><a href="#ES11" class="headerlink" title="ES11"></a>ES11</h2><h3 id="一、私有属性"><a href="#一、私有属性" class="headerlink" title="一、私有属性"></a>一、私有属性</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">  <span class="comment">// 共有属性</span></span><br><span class="line">  name;</span><br><span class="line">  <span class="comment">// 私有属性</span></span><br><span class="line">  #age;</span><br><span class="line">  #weight;</span><br><span class="line">  <span class="comment">// 构造方法</span></span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">name, age, weight</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">    <span class="variable language_">this</span>.#age = age;</span><br><span class="line">    <span class="variable language_">this</span>.#weight = weight;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  intro () &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.#age);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.#weight);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 实例化</span></span><br><span class="line"><span class="keyword">const</span> girl = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&#x27;小康&#x27;</span>, <span class="number">18</span>, <span class="string">&#x27;45kg&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(girl.<span class="property">name</span>);</span><br><span class="line"><span class="comment">// console.log(girl.#age); // 私有属性不可调用</span></span><br><span class="line">girl.<span class="title function_">intro</span>();</span><br></pre></td></tr></table></figure>

<h3 id="二、Promise-allSettled"><a href="#二、Promise-allSettled" class="headerlink" title="二、Promise.allSettled"></a>二、Promise.allSettled</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明两个 promise 对象</span></span><br><span class="line"><span class="keyword">const</span> p1 = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="title function_">resolve</span>(<span class="string">&#x27;商品数据 - 1&#x27;</span>);</span><br><span class="line">  &#125;, <span class="number">1000</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> p2 = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="title function_">resolve</span>(<span class="string">&#x27;商品数据 - 2&#x27;</span>);</span><br><span class="line">  &#125;, <span class="number">1000</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用 allsettled 方法</span></span><br><span class="line"><span class="keyword">const</span> result = <span class="title class_">Promise</span>.<span class="title function_">allSettled</span>([p1, p2]); <span class="comment">// 返回状态和值</span></span><br><span class="line"><span class="keyword">const</span> res = <span class="title class_">Promise</span>.<span class="title function_">all</span>([p1, p2]); <span class="comment">// 返回值</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span><br></pre></td></tr></table></figure>

<h3 id="三、String-prototype-matchAll"><a href="#三、String-prototype-matchAll" class="headerlink" title="三、String.prototype.matchAll"></a>三、String.prototype.matchAll</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str = <span class="string">`&lt;ul&gt;</span></span><br><span class="line"><span class="string">        &lt;li&gt;</span></span><br><span class="line"><span class="string">            &lt;a&gt;肖生克的救赎&lt;/a&gt;</span></span><br><span class="line"><span class="string">            &lt;p&gt;上映日期: 1994-09-10&lt;/p&gt;</span></span><br><span class="line"><span class="string">        &lt;/li&gt;</span></span><br><span class="line"><span class="string">        &lt;li&gt;</span></span><br><span class="line"><span class="string">            &lt;a&gt;阿甘正传&lt;/a&gt;</span></span><br><span class="line"><span class="string">            &lt;p&gt;上映日期: 1994-07-06&lt;/p&gt;</span></span><br><span class="line"><span class="string">        &lt;/li&gt;</span></span><br><span class="line"><span class="string">    &lt;/ul&gt;`</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 声明正则</span></span><br><span class="line"><span class="keyword">const</span> reg = <span class="regexp">/&lt;li&gt;.*?&lt;a&gt;(.*?)&lt;\/a&gt;.*?&lt;p&gt;(.*?)&lt;\/p&gt;/</span>sg;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用方法</span></span><br><span class="line"><span class="keyword">const</span> result = str.<span class="title function_">matchAll</span>(reg);</span><br><span class="line"></span><br><span class="line"><span class="comment">// for(let v of result)&#123;</span></span><br><span class="line"><span class="comment">//   console.log(v);</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr = [...result];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr);</span><br></pre></td></tr></table></figure>

<h3 id="四、可选链操作符"><a href="#四、可选链操作符" class="headerlink" title="四、可选链操作符"></a>四、可选链操作符</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ?.</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">main</span> (config) &#123;</span><br><span class="line">  <span class="comment">// const dbHost = config &amp;&amp; config.db &amp;&amp; config.db.host;</span></span><br><span class="line">  <span class="keyword">const</span> dbHost = config?.<span class="property">db</span>?.<span class="property">host</span>;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(dbHost);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">main</span>(&#123;</span><br><span class="line">  <span class="attr">db</span>: &#123;</span><br><span class="line">    <span class="attr">host</span>: <span class="string">&#x27;192.168.1.100&#x27;</span>,</span><br><span class="line">    <span class="attr">username</span>: <span class="string">&#x27;root&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">cache</span>: &#123;</span><br><span class="line">    <span class="attr">host</span>: <span class="string">&#x27;192.168.1.200&#x27;</span>,</span><br><span class="line">    <span class="attr">username</span>: <span class="string">&#x27;admin&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="五、动态import加载"><a href="#五、动态import加载" class="headerlink" title="五、动态import加载"></a>五、动态import加载</h3><ul>
<li>html</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;!<span class="variable constant_">DOCTYPE</span> html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;</span><br><span class="line">  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</span><br><span class="line">  &lt;title&gt;5-动态import加载&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;button id=&quot;btn&quot;&gt;点击&lt;/button&gt;</span><br><span class="line">  &lt;script src=&quot;./js/app.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line"></span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>app.js</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// import * as m1 from &quot;./hello.js&quot;;</span></span><br><span class="line"><span class="comment">//获取元素</span></span><br><span class="line"><span class="keyword">const</span> btn = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;btn&#x27;</span>);</span><br><span class="line"></span><br><span class="line">btn.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">import</span>(<span class="string">&#x27;./hello.js&#x27;</span>).<span class="title function_">then</span>(<span class="function"><span class="params">module</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">module</span>.<span class="title function_">hello</span>();</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>hello.js</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">hello</span> () &#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&#x27;Hello&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="六、BigInt"><a href="#六、BigInt" class="headerlink" title="六、BigInt"></a>六、BigInt</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//大整形</span></span><br><span class="line"><span class="comment">// let n = 521n;</span></span><br><span class="line"><span class="comment">// console.log(n, typeof(n));</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//函数</span></span><br><span class="line"><span class="comment">// let n = 123;</span></span><br><span class="line"><span class="comment">// console.log(BigInt(n));</span></span><br><span class="line"><span class="comment">// console.log(BigInt(1.2));</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//大数值运算</span></span><br><span class="line"><span class="keyword">let</span> max = <span class="title class_">Number</span>.<span class="property">MAX_SAFE_INTEGER</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(max);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(max + <span class="number">1</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(max + <span class="number">2</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">BigInt</span>(max))</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">BigInt</span>(max) + <span class="title class_">BigInt</span>(<span class="number">1</span>))</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">BigInt</span>(max) + <span class="title class_">BigInt</span>(<span class="number">2</span>))</span><br></pre></td></tr></table></figure>

<h3 id="七、globalThis"><a href="#七、globalThis" class="headerlink" title="七、globalThis"></a>七、globalThis</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(globalThis);</span><br></pre></td></tr></table></figure>

</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">Author: </span><span class="post-copyright-info"><a href="https://codeslive.top">小康</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">Link: </span><span class="post-copyright-info"><a href="https://codeslive.top/2023/05/26/ES6-ES11%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">https://codeslive.top/2023/05/26/ES6-ES11%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">Copyright Notice: </span><span class="post-copyright-info">All articles in this blog are licensed under <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> unless stating additionally.</span></div></div><div class="tag_share"><div class="post-meta__tag-list"></div><div class="post_share"><div class="social-share" data-image="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306101141945.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-full"><a href="/2023/05/26/TypeScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" title="TypeScript学习笔记"><img class="cover" src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306101140037.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">Previous Post</div><div class="prev_info">TypeScript学习笔记</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306101307395.webp?x-oss-process=style/webp" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">小康</div><div class="author-info__description"></div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">16</div></a><a href="/tags/"><div class="headline">Tags</div><div class="length-num">0</div></a><a href="/categories/"><div class="headline">Categories</div><div class="length-num">5</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/codeslive"><i class="fab fa-github"></i><span>关注我</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>Announcement</span></div><div class="announcement_content">别问我为什么沉默，时间比我能告诉你的更多。</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>Catalog</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#ES6"><span class="toc-number">1.</span> <span class="toc-text">ES6</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%E3%80%81let-var-const"><span class="toc-number">1.1.</span> <span class="toc-text">一、let var const</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-let"><span class="toc-number">1.1.0.1.</span> <span class="toc-text">1. let</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-const"><span class="toc-number">1.1.0.2.</span> <span class="toc-text">2. const</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8C%E3%80%81%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">1.2.</span> <span class="toc-text">二、模板字符串</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-%E5%A3%B0%E6%98%8E"><span class="toc-number">1.2.0.1.</span> <span class="toc-text">1. 声明</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-%E5%86%85%E5%AE%B9%E4%B8%AD%E5%8F%AF%E4%BB%A5%E7%9B%B4%E6%8E%A5%E5%87%BA%E7%8E%B0%E6%8D%A2%E8%A1%8C%E7%AC%A6"><span class="toc-number">1.2.0.2.</span> <span class="toc-text">2. 内容中可以直接出现换行符</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3-%E5%8F%98%E9%87%8F%E6%8B%BC%E6%8E%A5"><span class="toc-number">1.2.0.3.</span> <span class="toc-text">3.变量拼接</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%89%E3%80%81%E7%AE%80%E5%8C%96%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%86%99%E6%B3%95"><span class="toc-number">1.3.</span> <span class="toc-text">三、简化对象的写法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%9B%E3%80%81%E5%8F%98%E9%87%8F%E7%9A%84%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC"><span class="toc-number">1.4.</span> <span class="toc-text">四、变量的解构赋值</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-%E6%95%B0%E7%BB%84%E7%9A%84%E8%A7%A3%E6%9E%84"><span class="toc-number">1.4.0.1.</span> <span class="toc-text">1. 数组的解构</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-%E5%AF%B9%E8%B1%A1%E7%9A%84%E8%A7%A3%E6%9E%84"><span class="toc-number">1.4.0.2.</span> <span class="toc-text">2. 对象的解构</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%94%E3%80%81%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0"><span class="toc-number">1.5.</span> <span class="toc-text">五、箭头函数</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-this%E6%8C%87%E5%90%91%E9%97%AE%E9%A2%98"><span class="toc-number">1.5.0.1.</span> <span class="toc-text">1. this指向问题</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-%E4%B8%8D%E8%83%BD%E4%BD%9C%E4%B8%BA%E6%9E%84%E9%80%A0%E5%AE%9E%E4%BE%8B%E5%8C%96%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.5.0.2.</span> <span class="toc-text">2. 不能作为构造实例化对象</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3-%E4%B8%8D%E8%83%BD%E4%BD%BF%E7%94%A8-arguments-%E5%8F%98%E9%87%8F"><span class="toc-number">1.5.0.3.</span> <span class="toc-text">3. 不能使用 arguments 变量</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#4-%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E7%9A%84%E7%AE%80%E5%86%99"><span class="toc-number">1.5.0.4.</span> <span class="toc-text">4. 箭头函数的简写</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#5-%E5%AE%9E%E8%B7%B5%E6%A1%88%E4%BE%8B"><span class="toc-number">1.5.0.5.</span> <span class="toc-text">5. 实践案例</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%AD%E3%80%81%E5%8F%82%E6%95%B0%E9%BB%98%E8%AE%A4%E5%80%BC"><span class="toc-number">1.6.</span> <span class="toc-text">六、参数默认值</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-%E5%BD%A2%E5%8F%82%E5%88%9D%E5%A7%8B%E5%80%BC-%E5%85%B7%E6%9C%89%E9%BB%98%E8%AE%A4%E5%80%BC%E7%9A%84%E7%9A%84%E5%8F%82%E6%95%B0-%E4%B8%80%E8%88%AC%E4%BD%8D%E7%BD%AE%E8%A6%81%E9%9D%A0%E5%90%8E-%E6%BD%9C%E8%A7%84%E5%88%99"><span class="toc-number">1.6.0.1.</span> <span class="toc-text">1. 形参初始值 具有默认值的的参数, 一般位置要靠后 (潜规则)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-%E4%B8%8E%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC%E7%BB%93%E5%90%88"><span class="toc-number">1.6.0.2.</span> <span class="toc-text">2. 与解构赋值结合</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%83%E3%80%81rest-%E5%8F%82%E6%95%B0"><span class="toc-number">1.7.</span> <span class="toc-text">七、rest 参数</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-%E8%8E%B7%E5%8F%96%E5%AE%9E%E5%8F%82%E7%9A%84%E6%96%B9%E5%BC%8F"><span class="toc-number">1.7.0.1.</span> <span class="toc-text">1. 获取实参的方式</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-%E5%8F%82%E6%95%B0%E5%BF%85%E9%A1%BB%E8%A6%81%E6%94%BE%E5%88%B0%E5%8F%82%E6%95%B0%E6%9C%80%E5%90%8E"><span class="toc-number">1.7.0.2.</span> <span class="toc-text">2. 参数必须要放到参数最后</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%AB%E3%80%81%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">1.8.</span> <span class="toc-text">八、扩展运算符</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">1.8.0.1.</span> <span class="toc-text">1. 基本使用</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-number">1.8.0.2.</span> <span class="toc-text">2. 应用场景</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B9%9D%E3%80%81Symbol"><span class="toc-number">1.9.</span> <span class="toc-text">九、Symbol</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8-1"><span class="toc-number">1.9.0.1.</span> <span class="toc-text">1. 基本使用</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-Symbol%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7"><span class="toc-number">1.9.0.2.</span> <span class="toc-text">2.Symbol创建对象属性</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%81%E3%80%81%E8%BF%AD%E4%BB%A3%E5%99%A8"><span class="toc-number">1.10.</span> <span class="toc-text">十、迭代器</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8-2"><span class="toc-number">1.10.0.1.</span> <span class="toc-text">1. 基本使用</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-%E8%87%AA%E5%AE%9A%E4%B9%89%E9%81%8D%E5%8E%86%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.10.0.2.</span> <span class="toc-text">2. 自定义遍历对象</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%81%E4%B8%80%E3%80%81%E7%94%9F%E6%88%90%E5%99%A8"><span class="toc-number">1.11.</span> <span class="toc-text">十一、生成器</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8-3"><span class="toc-number">1.11.0.1.</span> <span class="toc-text">1.  基本使用</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-%E7%94%9F%E6%88%90%E5%99%A8%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0"><span class="toc-number">1.11.0.2.</span> <span class="toc-text">2. 生成器函数参数</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%81%E4%BA%8C%E3%80%81Promise"><span class="toc-number">1.12.</span> <span class="toc-text">十二、Promise</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95"><span class="toc-number">1.12.0.1.</span> <span class="toc-text">1. 基本语法</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-%E5%B0%81%E8%A3%85%E8%AF%BB%E5%8F%96%E6%96%87%E4%BB%B6"><span class="toc-number">1.12.0.2.</span> <span class="toc-text">2. 封装读取文件</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3-%E5%B0%81%E8%A3%85AJAX"><span class="toc-number">1.12.0.3.</span> <span class="toc-text">3. 封装AJAX</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#4-then%E6%96%B9%E6%B3%95"><span class="toc-number">1.12.0.4.</span> <span class="toc-text">4. then方法</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#5-catch%E6%96%B9%E6%B3%95"><span class="toc-number">1.12.0.5.</span> <span class="toc-text">5.  catch方法</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#6-promise%E5%AE%9E%E8%B7%B5"><span class="toc-number">1.12.0.6.</span> <span class="toc-text">6. promise实践</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%81%E4%B8%89%E3%80%81%E9%9B%86%E5%90%88"><span class="toc-number">1.13.</span> <span class="toc-text">十三、集合</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-Set"><span class="toc-number">1.13.0.1.</span> <span class="toc-text">1. Set</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-Map"><span class="toc-number">1.13.0.2.</span> <span class="toc-text">2. Map</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%81%E5%9B%9B%E3%80%81%E7%B1%BB"><span class="toc-number">1.14.</span> <span class="toc-text">十四、类</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-class%E7%B1%BB"><span class="toc-number">1.14.0.1.</span> <span class="toc-text">1. class类</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-class%E7%B1%BB%E7%9A%84%E9%9D%99%E6%80%81%E6%88%90%E5%91%98"><span class="toc-number">1.14.0.2.</span> <span class="toc-text">2. class类的静态成员</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3-class%E7%B1%BB%E7%BB%A7%E6%89%BF"><span class="toc-number">1.14.0.3.</span> <span class="toc-text">3. class类继承</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#4-class%E7%9A%84get%E5%92%8Cset"><span class="toc-number">1.14.0.4.</span> <span class="toc-text">4. class的get和set</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%81%E4%BA%94%E3%80%81%E6%95%B0%E5%80%BC%E6%89%A9%E5%B1%95"><span class="toc-number">1.15.</span> <span class="toc-text">十五、数值扩展</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%81%E5%85%AD%E3%80%81%E5%AF%B9%E8%B1%A1%E6%96%B9%E6%B3%95%E6%89%A9%E5%B1%95"><span class="toc-number">1.16.</span> <span class="toc-text">十六、对象方法扩展</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%81%E4%B8%83%E3%80%81%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-number">1.17.</span> <span class="toc-text">十七、模块化</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-%E6%96%87%E4%BB%B6%E5%BC%95%E5%85%A5"><span class="toc-number">1.17.0.1.</span> <span class="toc-text">1. 文件引入</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-babel%E8%BD%AC%E6%8D%A2"><span class="toc-number">1.17.0.2.</span> <span class="toc-text">2. babel转换</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES7"><span class="toc-number">2.</span> <span class="toc-text">ES7</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%E3%80%81includes"><span class="toc-number">2.1.</span> <span class="toc-text">一、includes</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8C%E3%80%81%E5%8F%8C%E6%98%9F%E5%8F%B7%EF%BC%88-%EF%BC%89"><span class="toc-number">2.2.</span> <span class="toc-text">二、双星号（**）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES8"><span class="toc-number">3.</span> <span class="toc-text">ES8</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%E3%80%81async%E5%87%BD%E6%95%B0"><span class="toc-number">3.1.</span> <span class="toc-text">一、async函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8C%E3%80%81await%E5%87%BD%E6%95%B0"><span class="toc-number">3.2.</span> <span class="toc-text">二、await函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%89%E3%80%81async%E5%92%8Cawait%E7%BB%93%E5%90%88%E8%AF%BB%E5%8F%96%E6%96%87%E4%BB%B6"><span class="toc-number">3.3.</span> <span class="toc-text">三、async和await结合读取文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%9B%E3%80%81async%E4%B8%8Eawait%E5%B0%81%E8%A3%85AJAX"><span class="toc-number">3.4.</span> <span class="toc-text">四、async与await封装AJAX</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%94%E3%80%81%E5%AF%B9%E8%B1%A1%E6%96%B9%E6%B3%95%E6%89%A9%E5%B1%95"><span class="toc-number">3.5.</span> <span class="toc-text">五、对象方法扩展</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES9"><span class="toc-number">4.</span> <span class="toc-text">ES9</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%E3%80%81%E5%AF%B9%E8%B1%A1%E5%B1%95%E5%BC%80"><span class="toc-number">4.1.</span> <span class="toc-text">一、对象展开</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8C%E3%80%81%E6%AD%A3%E5%88%99%E5%91%BD%E5%90%8D%E5%88%86%E7%BB%84"><span class="toc-number">4.2.</span> <span class="toc-text">二、正则命名分组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%89%E3%80%81%E6%AD%A3%E5%88%99%E6%96%AD%E8%A8%80"><span class="toc-number">4.3.</span> <span class="toc-text">三、正则断言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%9B%E3%80%81%E6%AD%A3%E5%88%99dotAll%E6%A8%A1%E5%BC%8F"><span class="toc-number">4.4.</span> <span class="toc-text">四、正则dotAll模式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES10"><span class="toc-number">5.</span> <span class="toc-text">ES10</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%E3%80%81Object-fromEntries"><span class="toc-number">5.1.</span> <span class="toc-text">一、Object.fromEntries</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8C%E3%80%81trimStart%E4%B8%8EtrimEnd"><span class="toc-number">5.2.</span> <span class="toc-text">二、trimStart与trimEnd</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%89%E3%80%81Array-prototype-flat%E4%B8%8EflatMap"><span class="toc-number">5.3.</span> <span class="toc-text">三、Array.prototype.flat与flatMap</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%9B%E3%80%81Symbol-prototype-description"><span class="toc-number">5.4.</span> <span class="toc-text">四、Symbol.prototype.description</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES11"><span class="toc-number">6.</span> <span class="toc-text">ES11</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%E3%80%81%E7%A7%81%E6%9C%89%E5%B1%9E%E6%80%A7"><span class="toc-number">6.1.</span> <span class="toc-text">一、私有属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8C%E3%80%81Promise-allSettled"><span class="toc-number">6.2.</span> <span class="toc-text">二、Promise.allSettled</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%89%E3%80%81String-prototype-matchAll"><span class="toc-number">6.3.</span> <span class="toc-text">三、String.prototype.matchAll</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%9B%E3%80%81%E5%8F%AF%E9%80%89%E9%93%BE%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="toc-number">6.4.</span> <span class="toc-text">四、可选链操作符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%94%E3%80%81%E5%8A%A8%E6%80%81import%E5%8A%A0%E8%BD%BD"><span class="toc-number">6.5.</span> <span class="toc-text">五、动态import加载</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%AD%E3%80%81BigInt"><span class="toc-number">6.6.</span> <span class="toc-text">六、BigInt</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%83%E3%80%81globalThis"><span class="toc-number">6.7.</span> <span class="toc-text">七、globalThis</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>Recent Post</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2023/06/26/JWT%EF%BC%88%E9%89%B4%E6%9D%83%EF%BC%89/" title="JWT（鉴权）"><img src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306261848915.webp?x-oss-process=style/webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JWT（鉴权）"/></a><div class="content"><a class="title" href="/2023/06/26/JWT%EF%BC%88%E9%89%B4%E6%9D%83%EF%BC%89/" title="JWT（鉴权）">JWT（鉴权）</a><time datetime="2023-06-26T10:46:25.846Z" title="Created 2023-06-26 18:46:25">2023-06-26</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/06/24/SSL%20TSL%20HTTPS/" title="SSL TSL HTTPS"><img src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306111114693.png?x-oss-process=style/webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="SSL TSL HTTPS"/></a><div class="content"><a class="title" href="/2023/06/24/SSL%20TSL%20HTTPS/" title="SSL TSL HTTPS">SSL TSL HTTPS</a><time datetime="2023-06-24T09:55:09.942Z" title="Created 2023-06-24 17:55:09">2023-06-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/06/11/XSS%E8%B7%A8%E7%AB%99%E8%84%9A%E6%9C%AC%E6%94%BB%E5%87%BB/" title="XSS跨站脚本攻击"><img src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306111114693.png?x-oss-process=style/webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="XSS跨站脚本攻击"/></a><div class="content"><a class="title" href="/2023/06/11/XSS%E8%B7%A8%E7%AB%99%E8%84%9A%E6%9C%AC%E6%94%BB%E5%87%BB/" title="XSS跨站脚本攻击">XSS跨站脚本攻击</a><time datetime="2023-06-11T03:10:26.561Z" title="Created 2023-06-11 11:10:26">2023-06-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/06/05/%E5%85%B3%E4%BA%8E%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E5%88%B7%E6%96%B0%E4%B8%A2%E5%A4%B1%E7%9A%84%E9%97%AE%E9%A2%98/" title="关于动态路由刷新丢失的问题"><img src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306052004251.webp?x-oss-process=style/webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="关于动态路由刷新丢失的问题"/></a><div class="content"><a class="title" href="/2023/06/05/%E5%85%B3%E4%BA%8E%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E5%88%B7%E6%96%B0%E4%B8%A2%E5%A4%B1%E7%9A%84%E9%97%AE%E9%A2%98/" title="关于动态路由刷新丢失的问题">关于动态路由刷新丢失的问题</a><time datetime="2023-06-05T12:00:12.830Z" title="Created 2023-06-05 20:00:12">2023-06-05</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/06/05/TCP%E5%AE%9E%E7%8E%B0http%E6%9C%8D%E5%8A%A1/" title="TCP实现http服务"><img src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306051707718.webp?x-oss-process=style/webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="TCP实现http服务"/></a><div class="content"><a class="title" href="/2023/06/05/TCP%E5%AE%9E%E7%8E%B0http%E6%9C%8D%E5%8A%A1/" title="TCP实现http服务">TCP实现http服务</a><time datetime="2023-06-05T09:01:56.797Z" title="Created 2023-06-05 17:01:56">2023-06-05</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2023 By 小康</div><div class="framework-info"><span>Framework </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>Theme </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text"><a target="_blank" rel="noopener" href="//beian.miit.gov.cn/"><center>粤ICP备2021164535号-2</center></a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="Read Mode"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="Switch Between Light And Dark Mode"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="Toggle between single-column and double-column"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="Setting"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="Table Of Contents"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="Back To Top"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><div class="js-pjax"></div><script defer="defer" id="ribbon" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-ribbon.min.js" size="150" alpha="0.6" zIndex="-1" mobile="false" data-click="false"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>